<template>
  <div class="box" :class="isCrumbs ? 'isCrumbs' : ''">
    <div class="crumbs" v-if="isCrumbs">
      <div class="crumbs_box">
        您现在的位置：
        <Breadcrumb :breadcrumbList="crumbsList"></Breadcrumb>
      </div>
    </div>
    <div class="main">
      <div class="title">{{ dataInfo.title }}</div>
      <div class="hr">
        <el-divider></el-divider>
      </div>
      <div class="release_date">发布日期：{{ dataInfo.unDate }}</div>
      <div class="content" v-html="dataInfo.content"></div>
      <div class="att_list" v-if="isAttList">
        <div class="hr">
          <el-divider content-position="left">附件</el-divider>
        </div>
        <div class="att_item" v-for="item in attList" :key="item.ID">
          <a :href="item.FILEPATH" target="_blank">{{ item.FILENAME }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleInfo } from "@/api/index";
export default {
  props: {
    detailData: {
      type: Object,
      default: function () {
        return {};
      },
    },
    isCrumbs: {
      type: Boolean,
    },
  },
  data() {
    return {
      attList: [],
      dataInfo: {},
      crumbsList: [],
      isAttList: false,
    };
  },
  created() {
    if (this.isCrumbs) {
      this.crumbsList = sessionStorage.getItem("crumbsList");
      this.crumbsList = JSON.parse(this.crumbsList);
      console.log(this.crumbsList);
    }
    if (this.$route.path.includes("/list")) {
      this.getArticleInfo(this.detailData.id);
    } else if (this.$route.path.includes("/detail")) {
      this.getArticleInfo(this.$route.query.id);
    }
  },
  methods: {
    getArticleInfo(id) {
      console.log("id", id);
      getArticleInfo(id).then((res) => {
        if (res.code === 0) {
          console.log(res);
          if (res.data.attList?.length > 0) {
            this.isAttList = true;
            this.attList = res.data.attList;
          }
          this.dataInfo = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  &.isCrumbs {
    background-color: #f5f9f7;
    .crumbs {
      .crumbs_box {
        width: 1440px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        height: 48px;
      }
      width: 100%;
      font-size: 15px;
      color: #fff;
      background-color: #af251b;
    }
    .main {
      width: 1440px;
      margin: 0 auto;
      padding: 20px 0;
      border-radius: 5px;
      background-color: #fff;
    }
  }
  padding-bottom: 40px;
  .main {
    .title {
      font-size: 25px;
      font-weight: 700;
      color: #333;
      text-align: center;
      margin: 20px 0;
    }
    .hr {
      width: 95%;
      margin: 0 auto;
      .el-divider__text {
        background-color: transparent;
      }
    }
    .release_date {
      text-align: center;
      font-size: 14px;
      color: #333;
    }
    .content {
      padding: 30px 2.5%;
    }
    .att_list {
      .att_item {
        padding-left: 2em;
        margin: 0.5em 0;
        a {
          color: #303030;
          text-decoration: none;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
}
</style>